<template>
  <div>
    <div id="slider" class="mui-slider ">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a :class="['mui-control-item', item.id == 0 ? 'mui-active' : '']" v-for="item in cates" :key="item.id" @click="getPhotoListByCateId(item.id)">
            {{ item.title }}
           </a>
					</div>
				</div>
			</div>
      <ul class="photo-list">
      <router-link v-for="item in photoList" :key="item.id" :to="'/home/photoinfo/' + item.id + '/' + JSON.stringify(item.message)" tag="li">
        <img v-lazy="item.img_url" alt="加载失败">
        <div class="info">
          <h3 class="info-title">{{ item.title }}</h3>
          <div class="info-body">{{ item.zhaiyao }}</div>
        </div>
      </router-link>
    </ul>
  </div>
</template>
<script>
// import mui from '../../lib/mui/js/mui.js'
export default {
  data(){
    return{
      photoList : [
        {id:0,title : '尤文图斯',
         message : {
          title : '尤文图斯足球俱乐部',
          add_time: '2018.12.21',
          click : 3,
          content : '尤文图斯足球俱乐部（Juventus Football Club S.P.A）是一家位于意大利皮埃蒙特大区都灵市的足球俱乐部，成立于1897年11月1日。'
        },
        zhaiyao : '尤文图斯足球俱乐部（Juventus Football Club S.P.A）是一家位于意大利皮埃蒙特大区都灵市的足球俱乐部，成立于1897年11月1日。',
         img_url:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536053906730&di=a76c75c138e23fc088ca29f09be09190&imgtype=0&src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20140106%2F20140106150405-1115694003.jpg'},
        {id:1,title : 'C罗皇马',
        message : {
          title : '伯纳乌国王',
          add_time: '2018.12.14',
          click : 10,
          content : '2009年6月以身价9600万欧元转会至西甲皇马，期间获得了4次欧洲冠军联赛冠军、2次西甲联赛冠军、3次世俱杯冠军等十六个赛事冠军。'
        },
        zhaiyao : '2009年6月以身价9600万欧元转会至西甲皇马，期间获得了4次欧洲冠军联赛冠军、2次西甲联赛冠军、3次世俱杯冠军等十六个赛事冠军。',
         img_url:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3881376417,2430325265&fm=26&gp=0.jpg'},
        {id:2,title : 'C罗葡萄牙',
        message : {
          title : '葡萄牙英雄',
          add_time: '2018.12.14',
          click : 16,
          content : '2016年7月，C罗带领葡萄牙获得2016年法国欧洲杯冠军，这是葡萄牙国家队历史上的第一个国际大赛冠军。'
        },
        zhaiyao : '2016年7月，C罗带领葡萄牙获得2016年法国欧洲杯冠军，这是葡萄牙国家队历史上的第一个国际大赛冠军。 [4]  2018年7月10日，转会至意甲尤文图斯',
         img_url:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536054865689&di=5424c9e05fd47903dfb8a269eabadf99&imgtype=0&src=http%3A%2F%2Fimg3.cache.netease.com%2Fphoto%2F0005%2F2009-04-26%2F57Q1LPNS00D80005.jpg'},
        {id:3,title : 'cl', message : {},
         zhaiyao : '123', img_url:''}
      ],
      cates : [
        {id: 0,title: '推荐'},
        {id: 1,title: '体育'},
        {id: 2,title: '社会'},
        {id: 3,title: '热点'}
      ]
    };
  },
  methods : {
    Post(){
      // this.$router.push({{path: '/home/photoinfo/:id'},  query: {id: id}})
    },
    getPhotoListByCateId(id){
      // for(var i= 0; i< this.photoList.length; i++){
      //   for(var prop in this.photoList[i]){
      //     // console.log(this.photoList[i][prop]);
      //     if(){

      //     }
      //   }
      // }
      this.photoList.splice(id,1)
    }
  },
}
</script>
<style scoped>
  .photo-list{
    list-style: none;
    margin: 0;
    padding: 10px;
  }
  .photo-list li{
    text-align: center;
    color: white;
    width: 100%;
    background-color: #ccc;
    position: relative;
    box-shadow: 0 0 10px gray;
    display: inline-block;
    border-radius: 5px;
    margin-bottom: 10px;
  }
  .photo-list li img{
    width: 100%;
    max-height: 300px;
    vertical-align: middle;
  }
  .photo-list li .info{
    position: absolute;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    text-align: left;
  }
  .photo-list li .info .info-title{
    font-size: 14px;
  }
  .photo-list li .info .info-body{
    font-size: 12px;
  }
  .photo-list li img[lazy=loading] {
  width: 40px;
  height: 300px;
  margin: auto;
}
</style>


